<template>
	<view class="payment-container">
		<!-- 导航栏 -->
		<nav-bar title="订单支付"></nav-bar>
		
		<!-- 页面内容 -->
		<view class="page-content has-nav-bar">
		
		<!-- 支付信息 -->
		<view class="payment-info">
			<view class="payment-amount">
				<text class="amount-label">支付金额</text>
				<text class="amount-value">¥{{amount}}</text>
			</view>
			<view class="payment-time">
				<text>请在 {{remainingTime}} 内完成支付</text>
				<text>超时订单将自动取消</text>
			</view>
		</view>
		
		<!-- 支付方式 -->
		<view class="payment-methods">
			<view class="section-title">支付方式</view>
			<view class="method-list">
				<view class="method-item" 
					v-for="(method, index) in paymentMethods" 
					:key="method.id"
					@click="selectPaymentMethod(index)"
				>
					<view class="method-left">
						<image :src="method.icon" class="method-icon"></image>
						<view class="method-info">
							<text class="method-name">{{method.name}}</text>
							<text class="method-desc" v-if="method.desc">{{method.desc}}</text>
						</view>
					</view>
					<view class="method-right">
						<view class="checkbox" :class="{ checked: selectedMethodIndex === index }"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部支付按钮 -->
		<view class="footer">
			<button class="pay-btn" @click="pay">立即支付</button>
		</view>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/NavBar.vue';

export default {
	components: {
		NavBar
	},
		data() {
			return {
				orderId: '',
				amount: '0.00',
				countdown: 30 * 60, // 30分钟倒计时
				timer: null,
				selectedMethodIndex: 0,
				paymentMethods: [
					{
						id: 'wxpay',
						name: '微信支付',
						icon: '/static/payment/wxpay.png',
						desc: '推荐使用微信支付'
					},
					{
						id: 'alipay',
						name: '支付宝支付',
						icon: '/static/payment/alipay.png'
					},
					{
						id: 'balance',
						name: '余额支付',
						icon: '/static/payment/balance.png',
						desc: '可用余额: ¥0.00'
					}
				]
			}
		},
		computed: {
			remainingTime() {
				const minutes = Math.floor(this.countdown / 60);
				const seconds = this.countdown % 60;
				return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
			}
		},
		onLoad(options) {
			// 获取订单ID和金额
			if (options.orderId) {
				this.orderId = options.orderId;
			}
			if (options.amount) {
				this.amount = options.amount;
			}
			
			// 开始倒计时
			this.startCountdown();
		},
		onUnload() {
			// 清除定时器
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 开始倒计时
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(this.timer);
						// 订单超时处理
						this.handleOrderTimeout();
					}
				}, 1000);
			},
			
			// 选择支付方式
			selectPaymentMethod(index) {
				this.selectedMethodIndex = index;
			},
			
			// 支付
			pay() {
				const method = this.paymentMethods[this.selectedMethodIndex];
				
				uni.showLoading({
					title: '支付处理中...'
				});
				
				// 模拟支付过程
				setTimeout(() => {
					uni.hideLoading();
					
					// 支付成功，更新订单状态
					this.updateOrderStatus();
					
					// 显示支付成功
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					});
					
					// 跳转到支付成功页面
					setTimeout(() => {
						uni.redirectTo({
							url: `/pages/order/success?orderId=${this.orderId}`
						});
					}, 1500);
				}, 2000);
			},
			
			// 更新订单状态
			updateOrderStatus() {
				// 获取本地存储的订单
				let orders = uni.getStorageSync('orders') || [];
				const orderIndex = orders.findIndex(order => order.id === this.orderId);
				
				if (orderIndex !== -1) {
					// 更新订单状态为已支付
					orders[orderIndex].status = 'paid';
					orders[orderIndex].payTime = new Date().toISOString();
					// 保存回本地存储
					uni.setStorageSync('orders', orders);
				}
			},
			
			// 订单超时处理
			handleOrderTimeout() {
				uni.showModal({
					title: '订单超时',
					content: '支付已超时，订单将自动取消',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							// 更新订单状态为已取消
							this.cancelOrder();
							// 返回订单列表页
							uni.redirectTo({
								url: '/pages/order/list'
							});
						}
					}
				});
			},
			
			// 取消订单
			cancelOrder() {
				// 获取本地存储的订单
				let orders = uni.getStorageSync('orders') || [];
				const orderIndex = orders.findIndex(order => order.id === this.orderId);
				
				if (orderIndex !== -1) {
					// 更新订单状态为已取消
					orders[orderIndex].status = 'canceled';
					orders[orderIndex].cancelTime = new Date().toISOString();
					orders[orderIndex].cancelReason = '支付超时自动取消';
					// 保存回本地存储
					uni.setStorageSync('orders', orders);
				}
			}
		}
	}
</script>

<style lang="scss">
	.payment-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.navbar {
		display: flex;
		align-items: center;
		height: 90rpx;
		background-color: #fff;
		padding: 0 30rpx;
		position: relative;
		
		.navbar-left {
			display: flex;
			align-items: center;
			
			.back-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			
			text {
				font-size: 28rpx;
				color: #333;
			}
		}
		
		.navbar-title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.navbar-right {
			width: 100rpx;
		}
	}
	
	.payment-info {
		background-color: #fff;
		padding: 60rpx 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.payment-amount {
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.amount-label {
				font-size: 30rpx;
				color: #666;
				margin-bottom: 20rpx;
			}
			
			.amount-value {
				font-size: 60rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.payment-time {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			text {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 10rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
	
	.payment-methods {
		background-color: #fff;
		padding: 30rpx;
		
		.section-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
		}
		
		.method-list {
			.method-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #f5f5f5;
				
				&:last-child {
					border-bottom: none;
				}
				
				.method-left {
					display: flex;
					align-items: center;
					
					.method-icon {
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
					}
					
					.method-info {
						.method-name {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 6rpx;
						}
						
						.method-desc {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				
				.method-right {
					.checkbox {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						border: 2rpx solid #ddd;
						position: relative;
						
						&.checked {
							background-color: #FF6600;
							border-color: #FF6600;
							
							&:after {
								content: '';
								position: absolute;
								left: 14rpx;
								top: 8rpx;
								width: 8rpx;
								height: 16rpx;
								border-right: 4rpx solid #fff;
								border-bottom: 4rpx solid #fff;
								transform: rotate(45deg);
							}
						}
					}
				}
			}
		}
	}
	
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.pay-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #FF6600;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 45rpx;
		}
	}
</style> 